<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"
          name="viewport"/>
    <link href="./css/font.css" rel="stylesheet">
    <link href="./css/xadmin.css" rel="stylesheet">
    <script charset="utf-8" src="./lib/layui/layui.js"></script>
    <script src="./js/xadmin.js" type="text/javascript"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" onclick="location.reload()"
       style="line-height:1.6em;margin-top:3px;float:right" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                </div>

                <div class="layui-card-body layui-table-body layui-table-main">

                    <!--                            <td class="td-status">
                                                          <span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span></td>
                                                        <td class="td-manage">

                                                        </td>-->
                    <table id="page" lay-filter="page"></table>
                </div>

            </div>
        </div>
    </div>
</div>
</body>

<script id="barPerson" type="text/html">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:inline="none">
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#page'
            , url: '/seluser'
            , page: true
            , limits: [10, 30, 50, 100, 300]
            , limit: 10 //每页默认显示的数量
            , cols: [[
                {type: 'checkbox', width: '10%'}
                , {field: 'id', width: '10%', title: 'id', sort: true}
                , {field: 'username', width: '20%', title: '用户名', edit: 'text'}
                , {field: 'email', width: '30%', title: '邮箱', edit: 'text'}
                , {field: 'password', width: '20%', title: '密码', edit: 'text'}
                , {fixed: 'right', width: '10%', title: '操作', align: 'center', toolbar: '#barPerson'}
            ]]
        });
        //监听工具条
        table.on('tool(page)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    var flag = false;
                    $.ajaxSettings.async = false; //关闭异步
                    $.post("/delMenber?id=" + data.id, function (data) {
                        if (data == "false") {
                            flag = true;
                        }
                    });
                    if (flag) {
                        layer.msg('删除失败!', {
                            icon: 2,
                            time: 1000
                        });
                        return false;
                    }
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.msg('删除成功!', {
                        icon: 1,
                        time: 1000
                    });
                    layer.close(index);
                    //向服务端发送删除指令
                });
            }
        });
        //监听单元格编辑
        table.on('edit(page)', function (obj) {
            var data = obj.data; //得到所在行所有键值
            var flag = false;
            $.ajaxSettings.async = false; //关闭异步
            $.post("/editUser", data, function (da) {
                if (da == 0) {
                    layer.msg('修改失败!', {
                        icon: 2,
                        time: 1000
                    });
                    flag = true;
                }

            });
            if (flag)
                return false;
            layer.msg('修改成功!', {
                icon: 1,
                time: 1000
            });
        });

        });


        layui.use(['laydate', 'form'], function () {
            var laydate = layui.laydate;
            var form = layui.form;


            // 监听全选
            form.on('checkbox(checkall)', function (data) {

                if (data.elem.checked) {
                    $('tbody input').prop('checked', true);
                } else {
                    $('tbody input').prop('checked', false);
                }
                form.render('checkbox');
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });


        });

</script>
</html>